<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
	<head>
		<title>注册 - 用户中心</title>
		<%@ include file="/common/include/title.jsp" %>
		<link href="${rootPath }/css/bootstrapValidator.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="${rootPath }/common/resource/js/bootstrapValidator.js"></script>
		<script type="text/javascript">
			$(function() {
			    $('#form').bootstrapValidator({
			        container: 'tooltip',
			//        trigger: 'blur',
			        feedbackIcons: {
			            valid: 'glyphicon glyphicon-ok',
			            invalid: 'glyphicon glyphicon-remove',
			            validating: 'glyphicon glyphicon-refresh'
			        },
			        fields: {
			        	email: {
			                validators: {
			                    stringLength: {
			                        enabled: true,
			                        min: 4,
			                        message: '邮箱最少输入四个字符'
			                    },
			                    emailAddress: {
			                        message: '邮箱格式不合法'
			                    },
			                    notEmpty: {
			                        message: '邮箱不能为空'
			                    }
			                }
			            },
			            password: {
			                validators: {
			                    stringLength: {
			                        min: 4,
			                        message: '密码最少输入四个字符'
			                    },
			                    identical: {
			                        field: 'confirmPassword',
			                        message: '必须与确认密码一致'
			                    },
			                    notEmpty: {
			                        message: '密码不能为空'
			                    }
			                }
			            },
			            confirmPassword:{
			                validators: {
			                    stringLength: {
			                        min: 4,
			                        message: '确认密码最少输入四个字符'
			                    },
			                    identical: {
			                        field: 'password',
			                        message: '必须与密码一致'
			                    },
			                    notEmpty: {
			                        message: '确认密码不能为空'
			                    }
			                }
			            },
			            code: {
			                validators: {
			                    stringLength: {
			                        min: 4,
			                        max: 4,
			                        message: '请输入四位验证码'
			                    },
			                    notEmpty: {
			                        message: '密码不能为空'
			                    }
			                }
			            }
			        }
			    });
			});
		</script>
	</head>
	<body>
		<%@ include file="/common/include/header.jsp" %>
		<div class="container">
			<div class="col-sm-8 col-sm-offset-1">
				<form id="form" class="form-horizontal" method="post"
					action="${rootPath }/registerSubmit.htm">
	
					<h2 class="col-sm-offset-1 form-signin-heading">注册</h2>
					<div class="form-group">
						<label for="email" class="col-sm-2 control-label">邮箱</label>
						<div class="col-sm-8">
							<input type="text" id="email" name="email" class="form-control"
								value="${requestScope.email }" placeholder="邮箱">
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword" class="col-sm-2 control-label">密码</label>
						<div class="col-sm-8">
							<input type="password" name="password" id="inputPassword"
								class="form-control" placeholder="密码" />
						</div>
					</div>
					<div class="form-group">
						<label for="inputPassword" class="col-sm-2 control-label">确认密码</label>
						<div class="col-sm-8">
							<input type="password" name="confirmPassword" id="confirmPassword"
								class="form-control" placeholder="确认密码" />
						</div>
					</div>
					<div class="form-group">
						<label for="email" class="col-sm-2 control-label">验证码</label>
						<div class="col-sm-8">
							<div class="input-group">
								<span class="input-group-addon">
									<a href="#" tabindex="-1" onclick="return refreshCode('imgCode');">
										<img id="imgCode" src="${rootPath }/randImg.htm" title="点击刷新验证码" width="75" height="20" />
								</a>
								</span>
								<input type="text" id="code" name="code" class="form-control" placeholder="验证码">
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-8 col-sm-offset-2">
							<button class="btn btn-lg btn-primary" type="submit">注册</button>
							<a href="${rootPath }/login.htm" class="btn btn-lg btn-primary">登陆</a>
						</div>
					</div>
				</form>
			</div>
		</div>
		
		<%@ include file="/common/include/footer.jsp" %>
	</body>
</html>